<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test element</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .upload-area {
            border: 2px dashed #dcdfe6;
            border-radius: 6px;
            padding: 20px;
            text-align: center;
            margin: 20px 0;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #409eff;
        }
        .raw-data {
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 500px;
            overflow-y: auto;
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            margin-top: 20px;
        }
        .task-status {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            
            <el-card>
                <div slot="header">
                    <span>上传简历</span>
                </div>
                
                <!-- 文件上传区域 -->
                <el-upload
                    class="upload-demo"
                    drag
                    action="#"
                    :auto-upload="false"
                    :on-change="handleFileChange"
                    :file-list="fileList"
                    accept=".pdf,.docx"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text"><em>点击/拖拽上传</em></div>
                    <div class="el-upload__tip" slot="tip">支持PDF/Word文件</div>
                </el-upload>
                
                <div style="margin-top: 20px;">
                    <el-button 
                        type="primary" 
                        @click="handleFormDataUpload" 
                        :disabled="!file" 
                        :loading="loading"
                    >
                        Form-Data 上传（同步）
                    </el-button>
                    <el-button 
                        type="primary" 
                        @click="handleBase64Upload" 
                        :disabled="!file" 
                        :loading="loading"
                        style="margin-left: 10px;"
                    >
                        Base64 上传（同步）
                    </el-button>
                    <el-button 
                        type="success" 
                        @click="handleFormDataUploadAsync" 
                        :disabled="!file" 
                        :loading="loading"
                        style="margin-left: 10px;"
                    >
                        Form-Data 上传（异步）
                    </el-button>
                    <el-button 
                        type="success" 
                        @click="handleBase64UploadAsync" 
                        :disabled="!file" 
                        :loading="loading"
                        style="margin-left: 10px;"
                    >
                        Base64 上传（异步）
                    </el-button>
                </div>
            </el-card>
            
            <!-- 任务状态 -->
            <div class="task-status" v-if="taskId">
                <el-card>
                    <div slot="header">
                        <span>异步任务状态</span>
                    </div>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="任务ID">{{ taskId }}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <el-tag :type="taskStatus === 'processing' ? 'warning' : taskStatus === 'completed' ? 'success' : 'danger'">
                                {{ taskStatus === 'processing' ? '处理中' : taskStatus === 'completed' ? '完成' : '失败' }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="处理时间" v-if="processingTime">
                            {{ processingTime }} 秒
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </div>
            
            <!-- API原始响应数据展示 -->
            <div v-if="rawData">
                <div v-if="parsedData && parsedData.data && parsedData.data.comment">
                    <el-card style="margin-bottom: 20px;">
                        <div slot="header">
                            <span>用户评价</span>
                        </div>
                        <el-descriptions :column="1" border>
                            <el-descriptions-item label="市场定位分析">
                                <div style="white-space: pre-wrap;">{{ parsedData.data.comment.positioning }}</div>
                            </el-descriptions-item>
                            <el-descriptions-item label="薪资水平预测">
                                <div style="white-space: pre-wrap;">{{ parsedData.data.comment.salary }}</div>
                            </el-descriptions-item>
                            <el-descriptions-item label="能力提升建议">
                                <div style="white-space: pre-wrap;">{{ parsedData.data.comment.advice }}</div>
                            </el-descriptions-item>
                            <el-descriptions-item label="职业发展路径">
                                <div style="white-space: pre-wrap;">{{ parsedData.data.comment.growing }}</div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </div>
                
                <el-card>
                    <div slot="header">
                        <span>API原始响应数据</span>
                    </div>
                    <div class="raw-data">{{ rawData }}</div>
                </el-card>
            </div>
            
            <!-- 错误信息 -->
            <div v-if="error && !taskId">
                <el-alert
                    title="错误"
                    :description="error"
                    type="error"
                    show-icon
                    style="margin-top: 20px;">
                </el-alert>
            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    fileList: [],
                    file: null,
                    loading: false,
                    rawData: null,
                    error: null,
                    taskId: null,
                    taskStatus: null,
                    processingTime: null,
                    pollInterval: null
                }
            },
            computed: {
                parsedData() {
                    if (!this.rawData) return null;
                    try {
                        return JSON.parse(this.rawData);
                    } catch (e) {
                        console.error("JSON解析失败:", e);
                        return null;
                    }
                }
            },
            methods: {
                handleFileChange(file, fileList) {
                    this.file = file.raw;
                    this.fileList = fileList;
                },
                // formdata上传方式
                async handleFormDataUpload() {
                    if (!this.file) {
                        this.$message.error('请先选择文件');
                        return;
                    }
                    
                    this.loading = true;
                    this.rawData = null;
                    this.error = null;
                    this.taskId = null;
                    this.taskStatus = null;
                    
                    const formData = new FormData();
                    formData.append('resume', this.file);
                    
                    try {
                        const response = await fetch('http://127.0.0.1:5000/api/v1/predict_from_resume', {
                            method: 'POST',
                            body: formData
                        });
                        
                        const data = await response.json();
                        this.rawData = JSON.stringify(data, null, 2);
                    } catch (error) {
                        this.error = error.message;
                    } finally {
                        this.loading = false;
                    }
                },
                // base64上传方式
                async handleBase64Upload() {
                    if (!this.file) {
                        this.$message.error('请先选择文件');
                        return;
                    }
                    
                    this.loading = true;
                    this.rawData = null;
                    this.error = null;
                    this.taskId = null;
                    this.taskStatus = null;
                    
                    try {
                        // 读取文件并转换为 base64
                        const reader = new FileReader();
                        reader.onload = async (e) => {
                            const base64Content = e.target.result.split(',')[1]; // 去掉 data:*/*;base64, 前缀
                            
                            const requestData = {
                                resume_base64: base64Content,
                                filename: this.file.name
                            };
                            
                            try {
                                const response = await fetch('http://127.0.0.1:5000/api/v1/predict_from_resume', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify(requestData)
                                });
                                
                                const data = await response.json();
                                this.rawData = JSON.stringify(data, null, 2);
                            } catch (error) {
                                this.error = error.message;
                            } finally {
                                this.loading = false;
                            }
                        };
                        reader.readAsDataURL(this.file);
                    } catch (error) {
                        this.error = error.message;
                        this.loading = false;
                    }
                },
                
                async handleFormDataUploadAsync() {
                    if (!this.file) {
                        this.$message.error('请先选择文件');
                        return;
                    }
                    
                    this.loading = true;
                    this.rawData = null;
                    this.error = null;
                    this.taskId = null;
                    this.taskStatus = null;
                    
                    const formData = new FormData();
                    formData.append('resume', this.file);
                    
                    try {
                        const response = await fetch('http://127.0.0.1:5000/api/v1/predict_from_resume_async', {
                            method: 'POST',
                            body: formData
                        });
                        
                        const data = await response.json();
                        this.rawData = JSON.stringify(data, null, 2);
                        
                        if (response.status === 202) {
                            // 异步处理
                            this.taskId = data.data.task_id;
                            this.taskStatus = 'processing';
                            this.pollTaskStatus(this.taskId);
                        } else {
                            this.error = data.message;
                            this.loading = false;
                        }
                    } catch (error) {
                        this.error = error.message;
                        this.loading = false;
                    }
                },
                
                async handleBase64UploadAsync() {
                    if (!this.file) {
                        this.$message.error('请先选择文件');
                        return;
                    }
                    
                    this.loading = true;
                    this.rawData = null;
                    this.error = null;
                    this.taskId = null;
                    this.taskStatus = null;
                    
                    try {
                        // 读取文件并转换为 base64
                        const reader = new FileReader();
                        reader.onload = async (e) => {
                            const base64Content = e.target.result.split(',')[1]; // 去掉 data:*/*;base64, 前缀
                            
                            const requestData = {
                                resume_base64: base64Content,
                                filename: this.file.name
                            };
                            
                            try {
                                const response = await fetch('http://127.0.0.1:5000/api/v1/predict_from_resume_async', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify(requestData)
                                });
                                
                                const data = await response.json();
                                this.rawData = JSON.stringify(data, null, 2);
                                
                                if (response.status === 202) {
                                    // 异步处理
                                    this.taskId = data.data.task_id;
                                    this.taskStatus = 'processing';
                                    this.pollTaskStatus(this.taskId);
                                } else {
                                    this.error = data.message;
                                    this.loading = false;
                                }
                            } catch (error) {
                                this.error = error.message;
                                this.loading = false;
                            }
                        };
                        reader.readAsDataURL(this.file);
                    } catch (error) {
                        this.error = error.message;
                        this.loading = false;
                    }
                },
                
                pollTaskStatus(taskId) {
                    this.pollInterval = setInterval(async () => {
                        try {
                            const response = await fetch(`http://127.0.0.1:5000/api/v1/predict_from_resume_status/${taskId}`);
                            const data = await response.json();
                            this.rawData = JSON.stringify(data, null, 2);
                            
                            this.taskStatus = data.data.status;
                            
                            if (data.data.status === 'completed') {
                                clearInterval(this.pollInterval);
                                this.loading = false;
                                this.processingTime = data.data.processing_time;
                            } else if (data.data.status === 'failed') {
                                clearInterval(this.pollInterval);
                                this.error = data.data.error;
                                this.loading = false;
                                this.processingTime = data.data.processing_time;
                            }
                        } catch (error) {
                            clearInterval(this.pollInterval);
                            this.error = "轮询任务状态失败: " + error.message;
                            this.loading = false;
                        }
                    }, 2000); // 每2秒轮询一次
                }
            },
            
            beforeDestroy() {
                // 组件销毁前清除轮询
                if (this.pollInterval) {
                    clearInterval(this.pollInterval);
                }
            }
        });
    </script>
</body>
</html>